import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();

/**
 * 构建一个贴图动画管道
 */
const curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-80, -40, 0),
  new THREE.Vector3(-70, 40, 0),
  new THREE.Vector3(70, -40, 0),
  new THREE.Vector3(80, -40, 0),
]);
const tubeGeo = new THREE.TubeGeometry(curve, 100, 8, 50, false);
const txrLoader = new THREE.TextureLoader();
const txr = txrLoader.load('../../textures/square-outline-textured.png');
txr.wrapS = THREE.RepeatWrapping;
txr.wrapT = THREE.RepeatWrapping;
txr.repeat = new THREE.Vector2(20, 1);
const tubeMat = new THREE.MeshPhongMaterial({
  map: txr,
  transparent: true,
  side: THREE.DoubleSide
});
const tube = new THREE.Mesh(tubeGeo, tubeMat);
scene.add(tube);

const al = new THREE.AmbientLight(0xffffff);
scene.add(al);
const k = innerWidth / innerHeight,
      s = 400,
      camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 10000);
camera.position.set(0, 0, 400);
camera.lookAt(scene.position);
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xaaaaaa);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
new OrbitControls(camera, renderer.domElement);

(function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
  // 动画成型的核心代码，偏移量每帧变化
  txr.offset.x -= .06;
})();